<template>
  <div class="question-component">
    <!-- 题目类型标签 -->
    <div class="question-type-tag" :class="question.questionType==='2'?'multiple':'single'">
      {{ questionTypeText }}
    </div>

    <!-- 题目内容 -->
    <div class="question-content">{{ question.content }}</div>

    <!-- 题目图片 -->
    <van-image
        v-if="question.contentImage"
        :src="toFileUrl(question.contentImage)"
        fit="contain"
        class="question-image"
        @click="previewImage"
    />

    <!-- 单选题目选项 -->
    <van-radio-group
        v-model="singleAnswer"
        v-if="question.questionType === '1' || question.questionType==='3'"
    >
      <van-cell-group>
        <van-cell
            v-for="(option) in question.options"
            :key="option.id"
            :title="option.content"
            clickable
            @click="selectSingleOption(option.optionCode)"
            :class="getOptionClass(option.optionCode, 'single')"
        >
          <template #right-icon>
            <van-radio :name="option.optionCode"/>
          </template>
          <template #icon v-if="showCorrect && isCorrectOption(option.optionCode)">
            <van-icon name="success" color="#07c160" class="correct-icon"/>
          </template>
        </van-cell>
      </van-cell-group>
    </van-radio-group>

    <!-- 多选题目选项 -->
    <van-checkbox-group
        v-model="multipleAnswer"
        v-if="question.questionType === '2'"
    >
      <van-cell-group>
        <van-cell
            v-for="(option) in question.options"
            :key="option.id"
            :title="option.content"
            clickable
            @click="selectMultipleOption(option.optionCode)"
            :class="getOptionClass(option.optionCode, 'multiple')"
        >
          <template #right-icon>
            <van-checkbox :name="option.optionCode"/>
          </template>
          <template #icon v-if="showCorrect && isCorrectOption(option.optionCode)">
            <van-icon name="success" color="#07c160" class="correct-icon"/>
          </template>
        </van-cell>
      </van-cell-group>
    </van-checkbox-group>

    <!-- 图片预览弹窗 -->
    <van-image-preview
        v-model:show="showImagePreview"
        :images="[toFileUrl(question.contentImage)]"
        v-if="question.contentImage"
    />
  </div>
</template>

<script setup lang="ts">
import {computed, ref} from 'vue';
import type {API} from "@/type/type";
import {toFileUrl} from "@/api/system/file";
import {watch} from 'vue';

const props = defineProps<{
  question: API.INextQuestion;
  showCorrect?: boolean;
  userAnswer?: string | string[] | null;
}>();


const emit = defineEmits<{
  (e: 'update:answer', answer: string | string[]): void;
  (e: 'submit'): void;
}>();

const singleAnswer = ref<string | null>(null);
const multipleAnswer = ref<string[]>([]);
const showImagePreview = ref(false);

watch(() => props.question, () => {
  singleAnswer.value = null;
  multipleAnswer.value = [];
});


// 题目类型文本
const questionTypeText = computed(() => {
  return props.question?.questionType === '1' ? '单选题' : props.question?.questionType === '2' ? '多选题' : '判断题';
});

// 判断是否是正确答案选项
const isCorrectOption = (index: string): boolean => {
  const correctAnswer = props.question.answers;

  if (Array.isArray(correctAnswer)) {
    return correctAnswer.includes(index);
  }
  return correctAnswer === index;
};

// 获取选项样式类
const getOptionClass = (index: string, type: string) => {
  if (!props.showCorrect) return '';

  const isSelected = type === 'single' ? singleAnswer?.value === index : multipleAnswer.value.includes(index);

  if (isCorrectOption(index)) {
    return 'correct-option';
  }
  if (isSelected && !isCorrectOption(index)) {
    return 'wrong-option';
  }
  return '';
};

// 选择单选选项
const selectSingleOption = (index: string) => {
  if (props.showCorrect) return;

  singleAnswer.value = index;
  emit('update:answer', index);
  emit('submit');
};

// 选择多选选项
const selectMultipleOption = (index: string) => {
  if (props.showCorrect) return;

  const currentIndex = multipleAnswer.value.indexOf(index);
  if (currentIndex === -1) {
    multipleAnswer.value.push(index);
  } else {
    multipleAnswer.value.splice(currentIndex, 1);
  }

  const answer = multipleAnswer.value.sort()
  emit('update:answer', answer);
};

// 预览图片
const previewImage = () => {
  if (props.question.contentImage) {
    showImagePreview.value = true;
  }
};
</script>

<style lang="less">
.question-component {
  padding: 16px;
  background-color: #fff;
  border-radius: 8px;

  .question-type-tag {
    display: inline-block;
    padding: 2px 8px;
    margin-bottom: 8px;
    font-size: 12px;
    border-radius: 4px;
    color: #fff;

    &.single {
      background-color: #1989fa;
    }

    &.multiple {
      background-color: #07c160;
    }
  }

  .question-content {
    font-size: 16px;
    line-height: 1.5;
    margin-bottom: 16px;
    color: #323233;
  }

  .question-image {
    width: 100%;
    height: 180px;
    margin-bottom: 16px;
    border-radius: 4px;
    overflow: hidden;
    cursor: pointer;
  }

  .van-cell {
    padding: 12px 16px;
    margin-bottom: 8px;
    border-radius: 8px;
    background-color: #f7f8fa;

    &:active {
      background-color: #e8e8e8;
    }

    &.correct-option {
      background-color: #f0fff0;
    }

    &.wrong-option {
      background-color: #fff0f0;
    }
  }

  .correct-icon {
    margin-right: 8px;
  }
}
</style>
